import React, { PureComponent } from 'react';
import style from "styled-components";
import { Modal, Button, Alert, Card, List, Avatar,Icon ,Form, Input, Select } from 'antd';
import "./InsuranceMangerment.less";
const productlistdata = [
  {
    title: '安保无忧全年意外险（60万计划）',
  },
];
const FormItem = Form.Item;
const { Option } = Select;
@Form.create()
// @connect(state => ({
//   profile: state.profile
// }))
export default class InsurancePurchase extends PureComponent {
    // 获取方案书
    constructor(props, context) {
      super(props, context);
      this.state = {
      policyHolder: "百川信（厦门）网络信息服务有限公司",//投保人
      contacts: "",//联系人
      contactsinformation: "",//联系方式
      enterprises: "",//企业人数
      premium:[],//保障金额
      amountmoney:[],//保费
      accessbookvisible:false,//获取方案书
      disabled: true,
      productvisible:false,//选择产品
      insurancetipvisible: false,//通知-购买引导
      guranteevisible:false,
      bookvisible:false,//通知-方案书
      insurancetipsvisible:false,//提示模板
      choosecheckvisible1:false,
      choosecheckvisible2:false,
      choosecheckvisible3:false,
      choosecheckvisible4:false,
      buyinsurance:false,//是否购买保险
      fillinformation:true,//是否填写信息
      // permiunaccord:true,//保障金额是否符合要求
      };
    }

  /******************************生命周期******************************/
  // componentWillMount = () => {
  //   this.setState({
  //     // buyinsurance:false,
  //   });
  // }

  // 温馨提示
  showsurancetipsModal = () => {
    this.setState({
      insurancetipsvisible:true,
    });
  }
  handlesuranceOk = (e) => {
    console.log(e);
    this.setState({
      insurancetipsvisible:false,
      buyinsurance:true,
      fillinformation:true,
      accessbookvisible:true,
    });
  }
  handleonline = (e) => {
    console.log(e);
    this.setState({
      insurancetipsvisible:false,
      buyinsurance:true,
      fillinformation:true,
      productvisible:false,
    });
  }
  handlesurancetipxCancel = (e) => {
    console.log(e);
    this.setState({
      insurancetipsvisible:false,
      buyinsurance:true,
      fillinformation:true,
      // insurancetipvisible:true,
    });
  }
  handlesurancetipCancel = (e) => {
    console.log(e);
    this.setState({
      // insurancetipvisible: false,
      insurancetipsvisible:false,
      buyinsurance:true,
      fillinformation:true,
    });
    this.props.history.push(
      // "/InsuranceManagement/InsuranceScheme"
      // 跳转到1-4-4
      "/Company/InsuranceBasic"
    );
  }
  // 温馨提示1
  showguranteeModal = () => {
    this.setState({
      guranteevisible: true,
    });
  }
  handleguranteeOk = (e) => {
    console.log(e);
    this.setState({
      guranteevisible: false,
    });
  }
  handleguranteeCancel = (e) => {
    console.log(e);
    this.setState({
      guranteevisible: false,
    });
  }
  handleOk = (e) => {
    console.log(e);
    this.setState({
      // visible: false,
      insurancetipvisible: false,
      bookvisible: false,
    });
  }
  handleCancel = (e) => {
    console.log(e);
    this.setState({
      // visible: false,
      insurancetipvisible: false,
      bookvisible: false,
    });
  }
  // 选择产品
  showproductModal = () => {
    this.setState({
      productvisible: true,
    });
  }
  handleproductOk = (e) => {
      this.setState({
        productvisible: false,
      });
      this.props.history.push(
        "/InsuranceManagement/InsuranceScheme"
      );
  }
  handleproductxCancel = (e) => {
    console.log(e);
    this.setState({
      productvisible: false,
    });
  }
  handleproductCancel = (e) => {
    console.log(e);
    this.setState({
      productvisible: false,
      accessbookvisible:true,
    });
  }
  showsurancetipModal = () => {
    this.setState({
      insurancetipvisible: true,
    });
  }
  // 通知-方案书
  showbookModal
  showbookModal = () => {
    this.setState({
      bookvisible: true,
    });
  }
  // state = { accessbookvisible:false, }
    // 获取方案书
    showaccessbookModal = () => {
      this.setState({
        accessbookvisible:true,
      });
    }
    handlereducepeopleOk = (e) => {
      console.log(e);
      this.setState({
        accessbookvisible:false,
        productvisible:true,
      });
    }
    handlereducepeopleCancel = (e) => {
      console.log(e);
      this.setState({
        accessbookvisible:false,
      });
    }
    handleSubmit = e => {
      e.preventDefault();
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
         console.log('表单提交中.........',values);
        }
      });
    };
    // 选择产品（1个）
    choosecheck1 = () =>{
      if(this.state.choosecheckvisible1 === false){
          this.setState({
            choosecheckvisible1:true,
            choosecheckvisible2:false,
            choosecheckvisible3:false,
            choosecheckvisible4:false,
          });
      }else{
        this.setState({
          choosecheckvisible1:false,
        });
      }
    }
    choosecheck2 = () =>{
      if(this.state.choosecheckvisible2 === false){
          this.setState({
            choosecheckvisible1:false,
            choosecheckvisible2:true,
            choosecheckvisible3:false,
            choosecheckvisible4:false,
          });
      }else{
        this.setState({
          choosecheckvisible2:false,
        });
      }
    }
    choosecheck3 = () =>{
      if(this.state.choosecheckvisible3 === false){
          this.setState({
            choosecheckvisible1:false,
            choosecheckvisible2:false,
            choosecheckvisible3:true,
            choosecheckvisible4:false,
          });
      }else{
        this.setState({
          choosecheckvisible3:false,
        });
      }
    }
    choosecheck4 = () =>{
      if(this.state.choosecheckvisible4 === false){
          this.setState({
            choosecheckvisible1:false,
            choosecheckvisible2:false,
            choosecheckvisible3:false,
            choosecheckvisible4:true,
          });
      }else{
        this.setState({
          choosecheckvisible4:false,
        });
      }
    }
  render() {
  const { submitting } = this.props;
  const { getFieldDecorator } = this.props.form;
  const formItemLayout = {
    labelCol: {
      xs: { span: 7 },
      sm: { span: 7 }
    },
    wrapperCol: {
      xs: { span: 15 },
      sm: { span: 15 },
      md: { span: 15 }
    }
  };
  const submitFormLayout = {
    wrapperCol: {
      xs: { span: 15, offset: 7 },
      sm: { span: 15, offset: 7 }
    }
  };
  const amountmoney = [
    {"code":0,"price":"20万"},
    {"code":1,"price":"40万"},
    {"code":2,"price":"60万"},
  ];
  const premium = [
    {"code":0,"price":"600元（不含600元）"},
    {"code":1,"price":"400元（不含400元）"},
    {"code":2,"price":"200元（不含200元）"},
  ];
    return (
      <Container className="chooseproductlist">
        <div>
         {/* <Button type="primary" onClick={this.showproductModal}>选择产品</Button> */}
          <Modal className="chooseproductlist"
            title="选择产品"
            visible={this.state.productvisible}
            onOk={this.handleproductOk}
            onCancel={this.handleproductxCancel}
            footer={[
              <Button key="back" onClick={this.handleproductCancel}>上一步</Button>,
              <Button key="submit" type="primary" onClick={this.handleproductOk}>
                获取
              </Button>,
            ]}
          >
            <div className="chooseproduct">
              <Alert message="请选择您感兴趣的产品！"
                      type="info" showIcon/>
              <Card onClick={this.choosecheck1}>
                <List
                itemLayout="horizontal"
                dataSource={productlistdata}
                renderItem={item => (
                  <List.Item>
                    <List.Item.Meta
                      avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
                      title={<a href="https://ant.design">{item.title}</a>}
                      description={<div>
                        <div>专为保安公司量身定制，市场少有高额度全保障，365天7X24小时意外身故（伤残）+意外医疗+住院津贴，保安人员的...专为保安公司量身定制，市场少有高额度全保障，365天7X24小时意外身故（伤残）+意外医疗+住院津贴，保安人员的...</div>
                        <div className="premium">保费：<span className="guaranteebig">360</span>
                        <span className="guaranteesm" style={{marginRight:20}}>元/人</span>
                        保障金额：<span className="guaranteebig">60</span><span className="guaranteebigsm">万</span>
                        {this.state.choosecheckvisible1===true
                        ?
                        <Icon type="check-circle-o" className="productselect"/>
                        :
                        <span></span>}</div></div>}
                    />
                  </List.Item>
                )}
                />
              </Card>
              <Card onClick={this.choosecheck2}>
                <List
                itemLayout="horizontal"
                dataSource={productlistdata}
                renderItem={item => (
                  <List.Item>
                    <List.Item.Meta
                      avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
                      title={<a href="https://ant.design">{item.title}</a>}
                      description={<div><div>专为保安公司量身定制，市场少有高额度全保障，365天7X24小时意外身故（伤残）+意外医疗+住院津贴，保安人员的...专为保安公司量身定制，市场少有高额度全保障，365天7X24小时意外身故（伤残）+意外医疗+住院津贴，保安人员的...</div><div className="premium">保费：<span className="guaranteebig">360</span><span className="guaranteesm" style={{marginRight:20}}>元/人</span>保障金额：<span className="guaranteebig">60</span><span className="guaranteebigsm">万</span>
                      {this.state.choosecheckvisible2===true
                        ?
                        <Icon type="check-circle-o" className="productselect"/>
                        :
                        <span></span>}</div></div>}
                    />
                  </List.Item>
                )}
                />
              </Card>
              <Card onClick={this.choosecheck3}>
                <List
                itemLayout="horizontal"
                dataSource={productlistdata}
                renderItem={item => (
                  <List.Item>
                    <List.Item.Meta
                      avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
                      title={<a href="https://ant.design">{item.title}</a>}
                      description={<div><div>专为保安公司量身定制，市场少有高额度全保障，365天7X24小时意外身故（伤残）+意外医疗+住院津贴，保安人员的...专为保安公司量身定制，市场少有高额度全保障，365天7X24小时意外身故（伤残）+意外医疗+住院津贴，保安人员的...</div><div className="premium">保费：<span className="guaranteebig">360</span><span className="guaranteesm" style={{marginRight:20}}>元/人</span>保障金额：<span className="guaranteebig">60</span><span className="guaranteebigsm">万</span>
                      {this.state.choosecheckvisible3===true
                        ?
                        <Icon type="check-circle-o" className="productselect"/>
                        :
                        <span></span>}</div></div>}
                    />   
                </List.Item>
              )}
              />
              </Card>
              <Card onClick={this.choosecheck4}>
                <List
                itemLayout="horizontal"
                dataSource={productlistdata}
                renderItem={item => (
                  <List.Item>
                    <List.Item.Meta
                      avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
                      title={<a href="https://ant.design">{item.title}</a>}
                      description={<div><div>专为保安公司量身定制，市场少有高额度全保障，365天7X24小时意外身故（伤残）+意外医疗+住院津贴，保安人员的...专为保安公司量身定制，市场少有高额度全保障，365天7X24小时意外身故（伤残）+意外医疗+住院津贴，保安人员的...</div><div className="premium">保费：<span className="guaranteebig">360</span><span className="guaranteesm" style={{marginRight:20}}>元/人</span>保障金额：<span className="guaranteebig">60</span><span className="guaranteebigsm">万</span>
                      {this.state.choosecheckvisible4===true
                        ?
                        <Icon type="check-circle-o" className="productselect"/>
                        :
                        <span></span>}</div></div>}
                    />
                  </List.Item>
              )}
              />
              </Card>
           </div>
          </Modal>
        </div>
        {/* 提示模板 */}
        <div>
          <Button type="primary" onClick={this.showsurancetipsModal}>温馨提示</Button>
          {
            
          }
          {this.state.buyinsurance==false||this.state.fillinformation==false
        ?
         this.setState({insurancetipsvisible:true})
         :
         this.setState({insurancetipsvisible:false})}
          <Modal className="surancetip"
            title="温馨提示"
            visible={this.state.insurancetipsvisible}
            onOk={this.handlesuranceOk}
            onCancel={this.handlesurancetipxCancel}
            footer={this.state.buyinsurance==false
              ?
              [
                <Button key="back" onClick={this.handlesurancetipCancel}>已购买保险</Button>,
                <Button key="submit" onClick={this.handlesuranceOk}>获取保险方案书</Button>,            
                <Button key="" type="primary" onClick={this.handleonline}>在线购买保险</Button>,
              ]
              :
              [
                <Button key="submit" onClick={this.handlesuranceOk}>申请保险方案书</Button>,
                <Button key="" type="primary" onClick={this.handleonline}>在线购买保险</Button>,
              ]}
          >
          <div>
                <Alert message="很遗憾，贵公司未购买保险产品。请依照政策要求购买符合条件的保险产品。"
                        type="warning" showIcon/>
            </div>
            <p>根据陕西保安监管部门通知规定：保安员意外伤害保险投保保额不低于陕西省平均人身损害赔偿标准（约37万元），若企业未按照通知的规定投保保安员意外伤害保险并通过保安服务监管信息系统将投保情况实时向公安机关报备的，年报不予通过。</p>
            <img src="" />
          </Modal>
          </div>
        <div>
        {/* <Button type="primary" onClick={this.showguranteeModal}>温馨提示1</Button> */}
          <Modal className="gurantee"
            title="温馨提示"
            visible={this.state.guranteevisible}
            onOk={this.handleguranteeOk}
            onCancel={this.handleguranteeCancel}
            footer={[
              <Button key="back" onClick={this.handleguranteeCancel}>以后再说</Button>,
              <Button key="submit" type="primary" onClick={this.handleguranteeOk}>马上查看</Button>,
            ]}>
            <div>
              <Icon type="check-circle-o" className="productselect"/>
              <p>恭喜贵司，已符合陕西西安地区保安从业单位应为保安员投保的相关政策要求，您还可继续投保为员工提高保障额度。</p>
            </div>
          </Modal>
        </div>
        <div>
          {/* <Button type="primary" onClick={this.showsurancetipModal}>通知-购买引导</Button> */}
          <Modal className="productguidance"
            title={<div>
                      <div className="guidanceauthor">
                        <span>来自：</span>
                        <span className="guidancepingtai">百保盾SaaS平台</span>
                      </div>
                      <span>系统安全提示！</span>
                      <div className="guidancetime">
                        <span>12月30日</span>&nbsp;
                        <span>09:00</span>
                      </div>
                    </div>}
            visible={this.state.insurancetipvisible}
            onOk={this.handleOk}
            onCancel={this.handleCancel}
            footer={[          
              <Button key="submit" type="primary" onClick={this.handleOk}>转发</Button>,                
            ]}
          >
           <div>
                <Alert message="系统检测到贵司保险相关信息空白。"
                        type="warning" showIcon/>     
            </div>
            <img src="" />
            <p>根据陕西保安监管部门通知规定：保安员意外伤害保险投保保额不低于陕西省平均人身损害赔偿标准（约37万元），若企业未按照通知的规定投保保安员意外伤害保险并通过保安服务监管信息系统将投保情况实时向公安机关报备的，年报不予通过。请选择以下操作：</p>
            <div className="guidancejump">
              <span></span>
              <a>在线购买保险</a>
            </div>
            <div className="guidancejump">
              <span></span>
              <a>申请保险方案书</a>
            </div>
            <div className="guidancejump">
              <span></span>
              <a>已购买保险信息完善</a>
            </div>
          </Modal>
        </div>
        <div>
          <Button type="primary" onClick={this.showbookModal}>通知-方案书</Button>
          <Modal className="productguidance"
            title={<div>
                      <div className="guidanceauthor">
                        <span>来自：</span>
                        <span className="guidancepingtai">百保盾SaaS平台</span>
                      </div>
                      <span>安保无忧全年意外险（30万计划）方案书</span>
                      <div className="guidancetime">
                        <span>12月30日</span>&nbsp;
                        <span>09:00</span>
                      </div>
                    </div>}
            visible={this.state.bookvisible}
            onOk={this.handleOk}
            onCancel={this.handleCancel}
            footer={[          
              <Button key="submit" type="primary" onClick={this.handleOk}>转发</Button>,                
            ]}
          >
            <p style={{marginTop:16}}>
              尊敬的XXXX保安公司：<br/>
              感谢您对安保无忧全年意外险（30万计划）的亲睐！<br/>
              为您定制的保险方案书已经生成，可点击以下连接查看。
            </p>
            <div className="guidancejump" style={{width:300}}>
              <span></span>
              <a>《安保无忧全年意外险（30万计划）方案书》</a>
            </div>
            <div className="guidancejump">
              <span></span>
              <a>在线购买保险</a>
            </div>
          </Modal>
        </div>
        {/* 获取方案书 */}
        <div>
          {/* <Button type="primary" onClick={this.showaccessbookModal}>获取方案书</Button> */}
          <Modal className="accessbook"
            title="获取方案书"
            visible={this.state.accessbookvisible}
            onOk={this.handlereducepeopleOk}
            onCancel={this.handlereducepeopleCancel}
            footer={null}>
            <div style={{paddingBottom:16}}>
              <Form onSubmit={this.handleSubmit} style={{ marginTop: 24 }}>
                <FormItem {...formItemLayout} label="投保人">
                  {getFieldDecorator("policyHolder", {
                    // {}
                    initialValue: this.state.policyHolder,
                    rules: [{ message: "请填写" }]
                  })(<Input disabled={this.state.disabled}/>)}
                </FormItem>
                <FormItem {...formItemLayout} label="联系人">
                  {getFieldDecorator("contacts", {
                    initialValue: this.state.contacts,
                    rules: [{ required: true, message: "限制长度20位数字", max:20 }]
                  })(<Input placeholder="请填写" />)}
                </FormItem>
                <FormItem {...formItemLayout} label="联系方式">
                  {getFieldDecorator("contactsinformation", {
                    initialValue: this.state.contactsinformation,
                    rules: [{ required: true, message: "限制长度11位数字", max:11,}]
                  })(<Input placeholder="请填写"/>)}
                </FormItem>
                <FormItem {...formItemLayout} label="企业人数">
                  {getFieldDecorator("enterprises", {
                    initialValue: this.state.enterprises,
                    rules: [{ message: "限制长度7位数字",type:"string" ,max:7}]
                  })(<Input placeholder="请输入"/>)}
                </FormItem>
                <FormItem {...formItemLayout} label="保障金额不低于">
                  {getFieldDecorator("amountmoney", {
                    initialValue: this.state.amountmoney,
                    rules: [{ required: true, message: "请选择" }]
                  })(
                    <Select placeholder="请选择">
                      {amountmoney.map((val, index) => {
                        return (
                          <Option key={index} value={val.code}>
                            {val.price}
                          </Option>
                        );
                      })}
                    </Select>
                  )}
                </FormItem>
                <FormItem {...formItemLayout} label="保费不超过">
                  {getFieldDecorator("premium", {
                    initialValue: this.state.premium,
                    rules: [{ required: true, message: "请选择" }]
                  })(
                    <Select placeholder="请选择">
                      {premium.map((val, index) => {
                        return (
                          <Option key={index} value={val.code}>
                            {val.price}
                          </Option>
                        );
                      })}
                    </Select>
                  )}
                </FormItem>
                <FormItem {...submitFormLayout} style={{marginBottom:0}}>
                  <Button loading={submitting} onClick={this.handlereducepeopleCancel}>晚点再看</Button>
                  <Button type="primary" style={{ marginLeft: 8 }} htmlType="submit" onClick={this.handlereducepeopleOk}>下一步</Button>
                </FormItem>
              </Form>
            </div>
          </Modal>
        </div>
      </Container>
    );
  }
}
const Container = style.div`
  padding:24px;
`;
